<template>
    <div class="manage">
        <div class="manage-header">
            <!-- form搜索区域 -->
            <el-form :inline="true" :model="herbal_form">
                <el-form-item>
                    <el-input placeholder="请输入用户账户" v-model="targetUser.username"></el-input>
                </el-form-item>
                <el-button type="primary" @click="getUserList()"> 查询 </el-button>
            </el-form>
        </div>
        <div class="common-table">
            <el-table
                stripe
                :data="userList"
                style="width: 100%"
                height="90%">
                    <el-table-column
                        prop="username"
                        label="账号" sortable>
                    </el-table-column>
                    <el-table-column
                        prop="dateCreated"
                        label="创建时间" sortable>
                        <template slot-scope="scope">
                            {{ dateFormat(scope.row.dateCreated,false) }}
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="lastLoginTime"
                        label="上次登录时间" sortable>
                        <template slot-scope="scope">
                            {{ dateFormat(scope.row.lastLoginTime,true) }}
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="lastLoginLocation"
                        label="上次登录IP地址">
                    </el-table-column>
                    <el-table-column
                        label="权限" width="300">
                        <template slot-scope="scope">
                            <el-radio-group v-model="scope.row.permission" size="small" @change="updatePrePermission(scope.row)">
                                <el-radio-button label="普通用户"></el-radio-button>
                                <el-radio-button label="管理员"></el-radio-button>
                                <el-radio-button label="超级管理员"></el-radio-button>
                            </el-radio-group>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="操作" width="100">
                        <template slot-scope="scope">
                            <el-button size="mini" type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pager">
                    <el-pagination
                        layout="prev, pager, next"
                        :total="total"
                        :page-size="pageData.size"
                        @current-change="handlePage">
                    </el-pagination>
                </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
      return {
        userList:[],
        total:0,
        pageData:{
            page:1,
            size:10
        },
        targetUser:{
           username :''
        }
      };
    },
    methods: {
        dateFormat(time,type) {
            if(time==null){
                return "从未登录"
            }
            var date=new Date(time);
            var year=date.getFullYear();
            var month= date.getMonth()+1<10 ? "0"+(date.getMonth()+1) : date.getMonth()+1;
            var day=date.getDate()<10 ? "0"+date.getDate() : date.getDate();
            var hours=date.getHours()<10 ? "0"+date.getHours() : date.getHours();
            var minutes=date.getMinutes()<10 ? "0"+date.getMinutes() : date.getMinutes();
            var seconds=date.getSeconds()<10 ? "0"+date.getSeconds() : date.getSeconds();
            // 拼接
            if(type){
                return year+"-"+month+"-"+day+" "+hours+":"+minutes+":"+seconds;
            }else{
                return year+"-"+month+"-"+day;
            }
        },
        updatePrePermission(row){
            let newVal=row.permission
            let tips="将此用户权限设置为[ "+newVal+" ], 是否继续?"
            this.$confirm(tips, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                    this.$axios.post("/changeUserPermission",{id:row.id,permission:newVal}).then(({data}) => {
                        if(data.code==200){
                            this.$message({
                                type: 'success',
                                message: data.data.message
                            });
                            this.getUserList()
                        }else{
                            this.$message({
                                type: 'error',
                                message: data.data.message
                            });
                            this.getUserList()
                        }
                    }).catch(()=>{
                        this.$message({
                            type: 'error',
                            message: "服务器错误！"
                        });
                        this.getUserList()
                    })
                }).catch(()=>{
                    this.$message({
                        type: 'info',
                        message: "取消成功"
                    });
                    this.getUserList()
                })
        },
        handleDelete(id) { 
            this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                    this.$axios.delete('/deleteUser',{
                    data: {
                        id: id
                    }}).then(()=>{
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.getUserList()
                })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });          
                });
        },
        getUserList(){
            this.$axios.get('/getUserList',{params:{...this.targetUser,...this.pageData}}).then(({data}) =>{
                this.userList = data.list
                this.total = data.count
            })
        },
        handlePage(val){
            this.pageData.page = val
            this.getUserList()
        },
     },
    mounted() {
        this.getUserList()
    }
  };
</script>

<style lang="less" scoped>
.manage{
    height:90%;
    .manage-header{
        display: flex;
        margin-left: 77%;
    }
    .common-table{
        position: relative;
        height: calc(100% - 62px);
        .pager{
            position: absolute;
            bottom: 0;
            right: 20px;
        }
    }
}
</style>